<template>
  <div class="about">
    <div class="banner">
      <img :src='aboutImg'>
      <div class="title">
        <div class="title_container">
          <h1>关于我们</h1>
        </div>
      </div>
    </div>
    <div class="about_main">
      <div class="container">
        <el-row :gutter="10">
          <el-col :md="6">
            <div class="about_bar">
              <div class="about_us">
                <h4>
              		<span>关于我们</span>
              	</h4>
                <ul class="about_list">
                  <li v-for='(item,index) in abouts' :class='{active:index==currentSelect?true:false}' @click='selected(index)'>
                    <router-link class="link" :to='item.link'>
                      <i class="el-icon-arrow-right"></i>
                      <span>{{item.title}}</span>
                    </router-link>
                  </li>
                </ul>
              </div>
            </div>
          </el-col>
          <el-col :md="18">
            <router-view/>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      aboutImg: require("../assets/news.jpg"),
      abouts: [{
          title: "公司简介",
          link: "/page/about/about1"
        },
        {
          title: "企业文化",
          link: "/page/about/about2"
        },
        {
          title: "联系我们",
          link: "/page/about/about3"
        }
      ],
      currentSelect:0
    }
  },
  methods:{
  	selected(index){
  		console.log(index);
      this.currentSelect=index;
  	}
  }
}

</script>
<style lang='scss'>
.about {
  width: 100%;
  @include bannerStyle;
  .about_main {
    background: #f2f2f2;
    padding-top: 50px;
    padding-bottom: 30px;
    .container {
      @include maxWidthMargin0;
      .about_bar {
        margin-right: 30px;
        padding: 20px;
        .about_us {
          h4 {
            position: relative;
            padding-bottom: 10px;
            font-size: 18px;
            color: #37474f;
            &::before {
              content: '';
              width: 35px;
              height: 2px;
              background: #d68b37;
              position: absolute;
              bottom: -1px;
            }
          }
          .about_list {
            margin-top: 15px;
            margin-bottom: 27px;
            li {
              .link {
                color: #37474f;
                display: block;
                border-bottom: 1px solid #e1e1e1;
                line-height: 41px;
                margin-bottom: 3px;
                margin-top: 0px;
                padding-left: 26px;
              }
              &.active {
                background: #37474f;
                a{
                  color: #fff;
                }
              }
            }
          }
        }
      }
    }
    
  }
}

</style>
